<template>
  <div class="line">
    <div class="main" ref="main">

    </div>
  </div>
</template>
<script>
const echarts = require('echarts/lib/echarts') // 引入echarts
require('echarts/lib/chart/bar') // 引入柱状图
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
  data () {
    return {
      title: {
        text1: '图表名称',
        x: 'left',
        y: 'top',
        fontFamily: 'Courier New',
        fontSize: 20,
        color: '#000'
      },
      legend: {
        backgroundColor: '#EFEBE3', // 背景颜色
        draggable: true, // 指示节点是否可以拖动
        symbolSize: 10, // 点的大小
        pointColor: '#d2dde6', // 点的颜色
        fontSize: 15, // 点中字体的大小
        worldColor: '#000', // 点中字体的颜色
        edgeSize: 10, // 连接线上字体大小
        lineColor: '#000', // 连接线颜色
        lineWidth: 1 // 连接线粗度
      },
      data: [],
      links: []
    }
  },
  methods: {
    initEcharts () {
      this.dealData()
      const mainDiv = this.$refs.main // 找到绘制的区域,强烈推荐使用refs
      const myChart = echarts.init(mainDiv) // 初始化
      myChart.setOption({ // 官网例子
        backgroundColor: this.legend.backgroundColor,
        // 图的标题
        title: {
          text: this.title.text1,
          x: this.title.x, // 标题横向位置//////////////////////////////////// 增
          y: this.title.y, // 标题纵向位置//////////////////////////////////// 增
          textStyle: {
            fontFamily: this.title.fontFamily,
            fontSize: this.title.fontSize,
            color: this.title.color
          }
        },
        // 提示框的配置
        tooltip: {
          formatter: function (x) {
            return x.data.des
          }
        },
        // 工具箱
        toolbox: {
          // 显示工具箱
          show: true,
          feature: {
            mark: {
              show: true
            },
            // 保存为图片
            saveAsImage: {
              show: true
            }
          }
        },

        series: [{
          type: 'graph', // 类型:关系图
          layout: 'force', // 图的布局，类型为力导图 echarts3的变化，force是力向图，circular是和弦图
          // symbolSize: 10, // 点的大小
          color: this.legend.pointColor, // 点的颜色
          roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
          edgeSymbol: ['circle', 'arrow'],
          edgeSymbolSize: [0, 5],
          force: {
            repulsion: 2500,
            edgeLength: [10, 50]
          },
          draggable: this.legend.draggable,
          lineStyle: {
            opacity: 0.6,
            width: this.legend.lineWidth, // 连接线粗细
            color: this.legend.lineColor, // 连接线颜色
            curveness: 0
          },
          edgeLabel: {
            normal: {
              show: true,
              textStyle: {
                fontSize: this.legend.edgeSize
              },
              formatter: function (x) {
                return x.data.name
              }
            }
          },
          label: {
            show: true,
            fontSize: this.legend.fontSize, // 点中字体的大小
            color: this.legend.worldColor // 点中字体的颜色
          },
          // 数据
          data: this.data,
          links: this.links
        }]
      })
    },
    dealData () {
      const info1 = this.$store.state.singleFile.info.toString()
      // console.log('接收到的数据：')
      // console.log(info1)
      var i = info1.indexOf('links')
      const str1 = info1.slice(5, i)
      const str2 = info1.slice(i + 6)
      // console.log('str1为：')
      // console.log(str1)
      // console.log('str2:')
      // console.log(str2)
      this.data = JSON.parse(str1)
      this.links = JSON.parse(str2)
      // console.log('data为：')
      // console.log(this.data)
      // console.log('links:')
      // console.log(this.links)
      // const info2 = info1.replace(']', '')
      // var i = info.indexOf('links')
      // const str1 = info.slice(5, 268)
    }
  },
  watch: {
    '$store.state.singleFile.date': function (val) {
      this.initEcharts()
    },
    '$store.state.chartTitle.text': function (val) {
      this.title.text1 = val
      console.log('histogram接收到的title' + this.title.text)
      this.initEcharts()
    },
    '$store.state.chartTitle.titleAcross': function (val) {
      this.title.x = this.$store.state.chartTitle.titleAcross
      this.initEcharts()
    },
    '$store.state.chartTitle.titleVertical': function (val) {
      this.title.y = this.$store.state.chartTitle.titleVertical
      this.initEcharts()
    },
    '$store.state.chartTitle.wordFamily': function (val) {
      this.title.fontFamily = val
      this.initEcharts()
    },
    '$store.state.chartTitle.wordSize': function (val) {
      this.title.fontSize = val
      this.initEcharts()
    },
    '$store.state.chartTitle.titleColor': function (val) {
      this.title.color = val
      this.initEcharts()
    },
    '$store.state.relationLegend.backgroundColor': function (val) {
      this.legend.backgroundColor = val
      console.log('关系图接收到的背景色为：' + val)
      this.initEcharts()
    },
    '$store.state.relationLegend.draggable': function (val) {
      this.legend.draggable = val
      this.initEcharts()
    },
    '$store.state.relationLegend.symbolSize': function (val) {
      this.legend.symbolSize = 0
      this.legend.symbolSize = val
      console.log('关系图接收到的点大小为：' + val)
      this.initEcharts()
    },
    '$store.state.relationLegend.pointColor': function (val) {
      this.legend.pointColor = val
      this.initEcharts()
    },
    '$store.state.relationLegend.fontSize': function (val) {
      this.legend.fontSize = val
      this.initEcharts()
    },
    '$store.state.relationLegend.worldColor': function (val) {
      this.legend.worldColor = val
      this.initEcharts()
    },
    '$store.state.relationLegend.edgeSize': function (val) {
      this.legend.edgeSize = val
      this.initEcharts()
    },
    '$store.state.relationLegend.lineColor': function (val) {
      this.legend.lineColor = val
      this.initEcharts()
    },
    '$store.state.relationLegend.lineWidth': function (val) {
      this.legend.lineWidth = val
      this.initEcharts()
    }
  },
  destroyed () {
    this.$store.state.singleFile.info = null
    this.$store.state.chartTitle.id = ''
    this.$store.state.chartTitle.text = ''
    this.$store.state.chartTitle.titleAcross = ''
    this.$store.state.chartTitle.titleVertical = ''
    this.$store.state.chartTitle.wordFamily = ''
    this.$store.state.chartTitle.wordSize = ''
    this.$store.state.chartTitle.titleColor = ''
  },
  mounted () {
    this.initEcharts()
  }
}
</script>

<style lang="scss" scoped>
  .line{
    .main {
      width: 735px;
      height:650px;
    }
  }
</style>
